import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
// import 'package:yi_shop/extensions/list.dart';
import 'package:yi_shop/model/telephone.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class TelephoneChargeController extends GetxController {
  List<Rx<TelephonePayModel>> pays = [];

  RxInt typeIndex = RxInt(-1);

  @override
  void onInit() {
    pays.add(Rx(TelephonePayModel(price: 30, sellPrice: 29.34)));
    pays.add(Rx(TelephonePayModel(price: 50, sellPrice: 49.90)));
    pays.add(Rx(TelephonePayModel(price: 100, sellPrice: 99.98)));
    pays.add(Rx(TelephonePayModel(price: 200, sellPrice: 199.60)));
    pays.add(Rx(TelephonePayModel(price: 300, sellPrice: 299.40)));
    pays.add(Rx(TelephonePayModel(price: 500, sellPrice: 499.00)));
    super.onInit();
  }
}

class TelephoneChargePage extends GetView<TelephoneChargeController> {
  const TelephoneChargePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: const Text('手机充值'),
        actions: [
          IconButton(onPressed: () {}, icon: SvgUtils.assetName('u17365', width: 15, height: 18))
        ],
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 15.w),
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: 30),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '188 2387 2276',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize28),
                  ),
                  SvgUtils.assetName('u17371', width: 30, height: 30)
                ],
              ),
            ),
            Container(
              alignment: Alignment.centerLeft,
              margin: const EdgeInsets.only(top: 15, bottom: 10),
              child: Text(
                '广西移动',
                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
              ),
            ),
            Container(
              height: 1,
              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
            ),
            Container(
              alignment: Alignment.centerLeft,
              margin: const EdgeInsets.only(top: 20, bottom: 20),
              child: Text(
                '充话费',
                style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
              ),
            ),
            StaggeredGrid.count(
              crossAxisCount: 3,
              crossAxisSpacing: 15,
              mainAxisSpacing: 20,
              children: controller.pays.map((e) {
                return Obx(() => InkWell(
                      onTap: () {
                        for (var element in controller.pays) {
                          if (e == element) {
                            e.update((val) {
                              val?.checked = !val.checked;
                            });
                          } else {
                            element.update((val) {
                              val?.checked = false;
                            });
                          }
                        }
                        controller.typeIndex.value = -1;
                      },
                      child: Container(
                        width: 98.w,
                        height: 67,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5.w),
                            border: Border.all(
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorD7d7),
                              width: e.value.checked ? 0 : 1,
                            ),
                            color: e.value.checked
                                ? ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f)
                                : Colors.transparent),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.only(top: 15),
                              alignment: Alignment.center,
                              child: Text(
                                '${e.value.price}元',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize15,
                                    color: e.value.checked
                                        ? ColorsUtils.colorFfff
                                        : ColorsUtils.colorF048),
                              ),
                            ),
                            Container(
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(top: 5.h),
                              child: Text(
                                '售价${e.value.sellPrice}元',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize12,
                                    color: e.value.checked
                                        ? ColorsUtils.colorFfff
                                        : ColorsUtils.colorAaaa),
                              ),
                            )
                          ],
                        ),
                      ),
                    ));
              }).toList(),
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 20),
              alignment: Alignment.centerLeft,
              child: Text(
                '更多',
                style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
              ),
            ),
            StaggeredGrid.count(
              crossAxisCount: 3,
              crossAxisSpacing: 15,
              mainAxisSpacing: 20,
              children: [
                Obx(() => InkWell(
                      onTap: () {
                        controller.typeIndex.value = 0;
                        for (var element in controller.pays) {
                          element.update((val) {
                            val?.checked = false;
                          });
                        }
                      },
                      child: Container(
                        width: 98.w,
                        height: 67,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5.w),
                            border: Border.all(
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorD7d7),
                              width: controller.typeIndex.value == 0 ? 0 : 1,
                            ),
                            color: controller.typeIndex.value == 0
                                ? ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f)
                                : Colors.transparent),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.only(top: 10),
                              alignment: Alignment.center,
                              child: Text(
                                '2G',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize15,
                                    color: controller.typeIndex.value == 0
                                        ? ColorsUtils.colorFfff
                                        : ColorsUtils.colorF048),
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 3.h),
                              alignment: Alignment.center,
                              child: Text(
                                '售价30.00元',
                                style: StylesUtils.customTextStyle(
                                  color: controller.typeIndex.value == 0
                                      ? ColorsUtils.colorFfff
                                      : ColorsUtils.colorAaaa,
                                  fontSize: StylesUtils.fontSize12,
                                ),
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 1.h),
                              child: Text(
                                '月底失效',
                                style: StylesUtils.customTextStyle(
                                  color: controller.typeIndex.value == 0
                                      ? ColorsUtils.colorFfff
                                      : ColorsUtils.colorAaaa,
                                  fontSize: StylesUtils.fontSize12,
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    )),
                Obx(() => InkWell(
                      onTap: () {
                        for (var element in controller.pays) {
                          element.update((val) {
                            val?.checked = false;
                          });
                        }
                        controller.typeIndex.value = 1;
                      },
                      child: Container(
                        width: 98.w,
                        height: 67,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5.w),
                            border: Border.all(
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorD7d7),
                              width: controller.typeIndex.value == 1 ? 0 : 1,
                            ),
                            color: controller.typeIndex.value == 1
                                ? ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f)
                                : Colors.transparent),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.only(top: 15),
                              alignment: Alignment.center,
                              child: Text(
                                '更多流量',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize15,
                                    color: controller.typeIndex.value == 1
                                        ? ColorsUtils.colorFfff
                                        : ColorsUtils.colorF048),
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 3.h),
                              alignment: Alignment.center,
                              child: Text(
                                '流量特惠超划算',
                                style: StylesUtils.customTextStyle(
                                  color: controller.typeIndex.value == 1
                                      ? ColorsUtils.colorFfff
                                      : ColorsUtils.colorAaaa,
                                  fontSize: StylesUtils.fontSize12,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    )),
                Obx(() => InkWell(
                      onTap: () {
                        for (var element in controller.pays) {
                          element.update((val) {
                            val?.checked = false;
                          });
                        }
                        controller.typeIndex.value = 2;
                      },
                      child: Container(
                        width: 98.w,
                        height: 67,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5.w),
                            border: Border.all(
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorD7d7),
                              width: controller.typeIndex.value == 2 ? 0 : 1,
                            ),
                            color: controller.typeIndex.value == 2
                                ? ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f)
                                : Colors.transparent),
                        child: Column(
                          children: [
                            Container(
                              margin: const EdgeInsets.only(top: 10),
                              alignment: Alignment.center,
                              child: Text(
                                '宽带新装',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize15,
                                    color: controller.typeIndex.value == 2
                                        ? ColorsUtils.colorFfff
                                        : ColorsUtils.colorF048),
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 3.h),
                              alignment: Alignment.center,
                              child: Text(
                                '约1.6元/天起',
                                style: StylesUtils.customTextStyle(
                                  color: controller.typeIndex.value == 2
                                      ? ColorsUtils.colorFfff
                                      : ColorsUtils.colorAaaa,
                                  fontSize: StylesUtils.fontSize12,
                                ),
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 1.h),
                              child: Text(
                                '江苏用户专享',
                                style: StylesUtils.customTextStyle(
                                  color: controller.typeIndex.value == 2
                                      ? ColorsUtils.colorFfff
                                      : ColorsUtils.colorAaaa,
                                  fontSize: StylesUtils.fontSize12,
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    ))
              ],
            ),
            Container(
              margin: const EdgeInsets.only(top: 30),
              alignment: Alignment.center,
              child: TextButton(
                  onPressed: () {},
                  style: ButtonStyle(
                      fixedSize: MaterialStatePropertyAll(Size(285.w, 40)),
                      backgroundColor: MaterialStatePropertyAll(
                          ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)),
                      alignment: Alignment.center,
                      shape: MaterialStatePropertyAll(
                          RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.r)))),
                  child: Text(
                    '立即充值',
                    style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize13),
                  )),
            )
          ],
        ),
      ),
    );
  }
}
